<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
   
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3373370_6gcjsu9nfmc.css">
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>

<body>
    <!-- 主体 -->
    <main>
        <!-- 主体版心 -->
        <div class="wrap  ">
            <div class="main-nav ">
                <div class="nav-btn">
                    <div class="pwd-btn">密码登录</div>
                </div>
                <div class="tel">
                    手机号登录/注册
                </div>
                <div class="friend">
                    快速找到好友，一站式记录你的运动
                </div>
            </div>
            <ul class="main-inp">
                <li class="telbox">
                    
                    <select name="" id="area" value="a86">
                        <option value="+86">+86</option>
                        <option value="+66">+66</option>
                    </select>
                    <input type="text" name="" id="tel-num" placeholder="请输入手机号">
                </li>
                <li class="verifybox">
                    <input type="text" name="" id="verify" placeholder="请验证码">
                    <canvas id="captcha" class="ml12" width="120" height="50"></canvas>
                    
                </li>
                <li class="passwordbox">
                    <input type="password" name="" id="pwd" placeholder="请输入密码">
                    <i class="iconfont icon-yanjing" id="show-pwd"></i>
                </li>
                <li class="dbpwdbox"> 
                    <input type="password" name="" id="dbpwd" placeholder="请再次确认密码">
                    <i class="iconfont icon-yanjing" id="show-dbpwd"></i>
                </li>
                <li class="login-btn">
                    注册账号
                </li>

            </ul>


            

        </div>
        <div class="main-footer  animate__animated animate__pulse">-HOLD ON-</div>
    </main>

   
   
   
   
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

</html>